<template>

    <div class="discussion-userInfo">
            <div class="disc-header">
              <div class="disc-left">
                <div class="left-avatar"></div>
                <div class="left-user">{{current.username}}</div>
                <div class="left-updateTime">{{formatDate(current.time)}}</div>
                <div class="left-commitType tiwen">{{current.action}}</div>
              </div>
<!--只有才能删除自己 -->
              <div @click="hanleCommentRecovery(current.id)" :class="[current.id==1?'disc-right':'none-right']">{{current.id==1?'删除':'回复'}}</div>

            </div>
            <div class="disc-content" v-html="current.content">
            </div>
            <CommentActions :isShow="false"></CommentActions>
            <!-- 回复部分 -->
            <div class="disc-comment" v-if="current.replies?.length">
              <div v-for="(c,i) in current.replies" :key="i">
                <!-- 给二级的数组内部添加属性{{c}} -->
                 <!-- {{userEditor.referenceAnalysisComments.commitList}} -->
                <div class="disc-box-item" v-if="c.isVisible"> 
                <div class="disc-header">
                  <div class="disc-left">
                    <div class="left-avatar"></div>
                    <div class="left-user">{{c.username}}</div>
                    <div class="left-updateTime">{{formatDate(c.time)}}</div>
                    <div class="left-commitType huifu">{{c.action}}</div>
                  </div>
                  <div class="disc-right zhuiwen" @click="hanleCommentRecovery(c.id)">追问</div>
                </div>
                <div class="disc-content" v-html="c.content">
                </div>
                <CommentActions :isShow="false"></CommentActions>
              </div>
              </div>
            
            
              <div class="load-more" v-if="current.replies.length>2&&isShowLoadMore" @click="openShowAll(current)">
                <span class="lable">
                  展开其他{{current.replies.length-2}}条回复
                </span>
                <el-icon style="color: #1E8FDA;">
                  <ArrowDown></ArrowDown>
                </el-icon>
    
    
              </div>
              <!-- 加载显示更多 -->
            </div>
            <!-- {{current}} -->
          </div>
    </template>

    <script setup>
   import CommentActions from '@/components/Comment/commentAction.vue'
   import {userEditorStore } from '@/stores/editor.js'
   import { formatDate} from "@/utils/index.js"
   const isShowLoadMore=ref(true)
   const userEditor=userEditorStore();  
    defineProps({
      current:{
        type:Object,
        default:()=>({
          username:"",
          time:"",
          action:"",
          content:"",
          replies:[]
        })
        }
    })
    // 评论追回包含我要提问
    const hanleCommentRecovery=(id)=>{
      userEditor.updateEditor(false)
      userEditor.handleUpdate({key:'current',value:1})
      userEditor.updateEditor(true)
      userEditor.currentCommitNode.pid=id;
    }
    const openShowAll=(current)=>{
      userEditor.updateShowAll(current.id)
      isShowLoadMore.value=false
    }
    </script>
    <style lang="scss" scoped>
    .discussion-userInfo {
      // margin-top: 10px;
      margin-top: 20px;
    
      .disc-header {
        display: flex;
        align-items: center;
        justify-content: space-between;
        margin-bottom: 20px;
      }
    
      .disc-left {
        display: flex;
        gap: 10px;
        align-items: center;
    
        .left-avatar {
          width: 24px;
          height: 24px;
          border-radius: 4px;
          background-color: #4673A2;
    
        }
    
        .left-user {
          font-family: PingFang SC;
          font-size: 16px;
          font-weight: 600;
          line-height: 22.4px;
          text-align: left;
          text-underline-position: from-font;
          text-decoration-skip-ink: none;
    
          color: #000;
        }
    
        .left-updateTime {
          font-family: PingFang SC;
          font-size: 14px;
          font-weight: 400;
          line-height: 19.6px;
          text-align: left;
          text-underline-position: from-font;
          text-decoration-skip-ink: none;
    
          color: #999;
        }
    
        .left-commitType {
          font-family: PingFang SC;
          font-size: 14px;
          font-weight: 400;
          line-height: 19.6px;
          text-align: left;
          text-underline-position: from-font;
          text-decoration-skip-ink: none;
          padding: 4px;
          border-radius: 8px;
    
          &.tiwen {
            color: #FFFFFF;
            background-color: #1E8FDA;
          }
    
          &.huifu {
            color: #fff;
            background-color: #13CD5E;
          }
    
        }
      }
      .none-right{
        color: #126983;
        font-size: 14px;
        font-weight: 400;
        line-height: 19.6px;
        text-align: left;
        text-decoration-line: underline;
        text-decoration-style: solid;
        text-underline-position: from-font;
        text-decoration-skip-ink: auto;
      }
    
      .disc-right {
        font-family: PingFang SC;
        font-size: 14px;
        font-weight: 400;
        line-height: 19.6px;
        text-align: left;
        text-decoration-line: underline;
        text-decoration-style: solid;
        text-underline-position: from-font;
        text-decoration-skip-ink: auto;
        color: #E52121;
    
        &.zhuiwen {
          color: #126983
        }
    
      }
    
      // 回复内容部分
      .disc-content {
        font-family: PingFang SC;
        font-size: 14px;
        font-weight: 400;
        line-height: 19.6px;
        text-align: left;
        text-underline-position: from-font;
        text-decoration-skip-ink: none;
    
        color: #000;
        margin-bottom: 20px;
      }
    
      .disc-comment {
        padding: 10px 20px;
        background: #1269830D;
    
      }
    
      .load-more {
        font-family: PingFang SC;
        font-size: 14px;
        font-weight: 400;
        line-height: 19.6px;
        text-align: left;
        text-underline-position: from-font;
        text-decoration-skip-ink: none;
        color: #1E8FDA;
        display: flex;
        align-items: center;
        cursor: pointer;
        .label{
          margin-right: 5px;
        }
      }
    }
    </style>